<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div v-cloak class="content">
      <div class="head-portrait">
        <div>头像</div>
        <div class="portrait">
          <img
            :src="userInfo.avatar || defaultImg"
            alt=""
            @click="show = true"
          />
        </div>
      </div>
      <PhotoUpload v-model:show="show"></PhotoUpload>
      <div class="info">
        <van-cell title="姓名" :value="userInfo.realName" />
        <van-cell title="性别" :value="userInfo.sexName" />
        <van-cell
          title="手机号"
          :value="userInfo.phone"
          is-link
          @click="toPhone"
        />
        <van-cell
          v-if="userInfo.roleName == '学生' && !isEnterprise"
          title="学号"
          :value="userInfo.code"
          is-link
          @click="setInfo('code')"
        />
        <van-cell
          :title="!isEnterprise ? '学校名称' : '企业名称'"
          :value="userInfo.tenantName"
        />
        <!-- 校长 -->
        <!-- <van-cell
          v-if="userInfo.roleName !== '学生' && userInfo.roleName !== '班主任'"
          title="部门名称"
          :value="userInfo.deptName"
          is-link
          @click="sexShow = true"
        /> -->
        <!-- 学生 -->
        <van-cell
          v-if="teacherTesting && !isEnterprise"
          title="年级名称"
          :value="userInfo.gradeName"
          is-link
          @click="studentShow = true"
        />
        <van-cell
          v-if="teacherTesting && !isEnterprise"
          title="班级名称"
          :value="userInfo.classNo"
          is-link
          @click="setInfo('classNo')"
        />
        <van-cell
          title="岗位"
          :value="isEnterprise ? '员工' : userInfo.postName"
        />
      </div>
    </div>
    <PopupCpt ref="refPopup">
      <SetName
        :user-info="userInfo"
        :type="type"
        @info="childrenName"
        @cancel="childrenCancel"
      ></SetName>
    </PopupCpt>
    <van-popup v-model:show="sexShow" round position="bottom">
      <van-picker
        :columns="deptList"
        @cancel="sexShow = false"
        @confirm="onSelect"
      >
        <template #option="item">
          <div>{{ item.title }}</div>
        </template>
      </van-picker>
    </van-popup>
    <van-popup v-model:show="studentShow" round position="bottom">
      <van-picker
        :columns="allGradeInfo"
        @cancel="studentShow = false"
        @confirm="onSelect2"
      >
        <template #option="item">
          <div>{{ item.gradeName }}</div>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<script lang="ts">
import axios from '/@/api/axios'
import {
  defineComponent,
  watch,
  onMounted,
  ref,
  Ref,
  reactive,
  computed,
} from 'vue'
import { useRouter } from 'vue-router'
import { getUserInfo } from '../../../../util/business-util'
import { useStore } from '/@/store'
import PopupCpt from '/@/components/PopupCpt.vue'
import SetName from './setname/index.vue'
import dftImg from '../../../../assets/image/default-user.png'
import PhotoUpload from '../../photo-upload.vue'
import { update, getDeptTree } from '/@/api/system/user'
import { Notify } from 'vant'

export default defineComponent({
  components: {
    PopupCpt,
    SetName,
    PhotoUpload,
    [Notify.Component.name]: Notify.Component,
  },
  setup() {
    const router = useRouter()
    const { state } = useStore()
    const show = ref(false)
    let sexShow = ref(false)
    const refPopup: Ref = ref(null)
    const userName = ref<string>('')
    const type = ref<string>()
    const studentShow = ref(false)

    const actions = ref([{ name: '男' }, { name: '女' }])

    const { userInfo, defaultImg, deptList, getUserInfo, allGradeInfo } =
      useUserInfo({
        show,
      })

    const isEnterprise = computed(() => {
      return state.enterprise.includes(userInfo.value.tenantId)
    })

    const childrenName = (val: {
      type: string
      code: string
      classNo: string
    }) => {
      close()
      getUserInfo()
    }

    const childrenCancel = (val: any) => {
      userName.value = val.name
      close()
    }

    let teacherTesting = ref(false)

    watch(
      () => userInfo.value.roleName,
      (val) => {
        if (
          !val.includes('校长') &&
          !val.includes('心理老师') &&
          !val.includes('心理专家')
        ) {
          teacherTesting.value = true
        }
      }
    )

    const onSelect = (item: any, index: number) => {
      let user = []
      user.push(userInfo.value)
      user[0].deptId = item.id
      user[0].deptName = item.title
      update(user).then(() => {
        Notify({ type: 'success', message: '修改成功！' })
      })
      sexShow.value = false
    }

    const onSelect2 = (item: any, index: number) => {
      let user = []
      user.push(userInfo.value)
      user[0].gradeName = item.gradeName
      user[0].gradeId = item.gradeNo
      console.log(user[0])
      update(user).then(() => {
        Notify({ type: 'success', message: '修改成功！' })
      })
      studentShow.value = false
    }

    const setInfo = (setType: string) => {
      type.value = setType
      refPopup.value.show()
    }

    function close() {
      refPopup.value.close()
    }
    return {
      isEnterprise,
      teacherTesting,
      userInfo,
      allGradeInfo,
      show,
      studentShow,
      type,
      defaultImg,
      deptList,
      actions,
      sexShow,
      refPopup,
      childrenName,
      onClickLeft() {
        router.push({
          name: 'Me',
        })
      },
      onSetSex() {
        sexShow.value = true
      },
      onSelect,
      onSelect2,
      setInfo,
      childrenCancel,
      toPhone() {
        router.push({
          name: 'set-phone',
        })
      },
    }
  },
})

function useUserInfo({ show }: { show: Ref<boolean> }) {
  const userInfo = ref<any>({})
  let defaultImg = ref('')
  let deptList = reactive<any>([])
  let allGradeInfo = ref<any>([])

  onMounted(getUserInfo)

  watch(show, (show) => {
    if (!show) {
      getUserInfo()
    }
  })

  async function getUserInfo() {
    const { data } = await axios.get(
      `/api/blade-user/info?time=${new Date().getTime()}`
    )
    userInfo.value = data.data
    defaultImg.value = dftImg

    getDeptTree(userInfo.value.tenantId).then((res) => {
      res.data.data.forEach((item: any) => {
        if (item.hasChildren) {
          item.children.forEach((item2: object) => {
            deptList.push(item2)
          })
        } else {
          deptList.push(item)
        }
      })
    })

    await axios.get(`/api/blade-system/grade/list`).then((res) => {
      allGradeInfo.value = res.data.data || []
    })
  }
  return {
    userInfo,
    defaultImg,
    deptList,
    getUserInfo,
    allGradeInfo,
  }
}
</script>

<style lang="less" scoped>
.content {
  color: #646566;

  .head-portrait {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;

    .portrait {
      display: flex;
      align-items: center;

      img {
        width: 70px;
        border-radius: 50%;
        margin-right: 15px;
      }
    }
  }
}
</style>
